<h2 class="pb-1">Leaderboards</h2>
<h6 class="pb-4">{{leaderboards.length}} leaderboards found.</h6>

<ngb-alert [dismissible]="false" type="danger" *ngIf="error">
  <img src="/assets/svg/red-triangle.svg" alt="" width="16" height="" class="mr-2">
  <h6 class="mr-2 d-inline font-weight-bold">Error while processing request: {{error}}</h6>
</ngb-alert>

<table class="table table-sm table-bordered table-hover">
  <thead class="thead-light">
  <tr>
    <th>Leaderboard ID</th>
    <th style="width: 130px">Sort Order</th>
    <th style="width: 130px">Operator</th>
    <th style="width: 130px">Reset Schedule</th>
    <th style="width: 100px">Authoritative</th>
    <th style="width: 100px">Tournament</th>
    <th style="width: 90px" *ngIf="deleteAllowed()">Remove</th>
  </tr>
  </thead>
  <tbody>
    <tr *ngFor="let l of leaderboards; index as i">
      <td (click)="viewLeaderboardEntries(l);">{{l.id}}</td>
      <td (click)="viewLeaderboardEntries(l);">{{orderString[l.sort_order]}}</td>
      <td (click)="viewLeaderboardEntries(l);">{{operatorString[l.operator]}}</td>
      <td (click)="viewLeaderboardEntries(l);">{{l.reset_schedule === '' ? '-' : l.reset_schedule}}</td>
      <td (click)="viewLeaderboardEntries(l);" *ngIf="l.authoritative" class="text-center">Yes</td>
      <td (click)="viewLeaderboardEntries(l);" *ngIf="!l.authoritative" class="text-center">No</td>
      <td (click)="viewLeaderboardEntries(l);" *ngIf="l.tournament" class="text-center">Yes</td>
      <td (click)="viewLeaderboardEntries(l);" *ngIf="!l.tournament" class="text-center">No</td>
      <td *ngIf="deleteAllowed()" class="text-center"><button type="button" class="btn btn-sm btn-danger" (click)="deleteLeaderboard($event, i, l);">Delete</button></td>
    </tr>
    <tr *ngIf="leaderboards.length === 0"><td colspan="7" class="text-muted">No leaderboards were found.</td></tr>
  </tbody>
</table>
